<!-- 文件同步趋势图 -->
<template>
    <div class="wrap">
      <span class="title">文件同步趋势图</span>
      <div ref="linechart" id="chart1" :style="{ height: height, width: width }"/>
    </div>
</template>
  
  <script>
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  export default {
    mixins: [resize],
    props:{
      list:{
        type:Object
      },
      dataList:{
        type:Array
      }
    },
    data() {
      return {
        width: "100%",
        height: "350px",
        chart: null
      };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      // this.getData();
      // console.log(this.list,1111111111111);
    },
    watch:{
      list: {
        deep: true,
        handler(val) {
          console.log(val);
          this.$nextTick(() => {
            this.initChart()
          }) 
        }
      },
      dataList:{
        handler() {
          // console.log(val);
          this.$nextTick(() => {
            this.initChart()
          }) 
        }
      }
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      console.log(this.list);
    
      this.$nextTick(()=>{
        this.initChart();
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.linechart, 'macarons')
        this.setOptions(this.dataList);
      },
      setOptions(dataList) {
        // let value = 0;
        // // console.log(list);
        let data = []
        let dataNum = []
        // // value =(list.useVal/list.allVal)*100
        dataList.map(item=>{
          data.push(item.value)
          dataNum.push(item.name)
        })
        
        this.chart.setOption({
            xAxis: {
            type: 'category',
            data:data
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        series: [
            {
            data: dataNum,
            type: 'bar'
            }
        ]
        });
      }
    }
  };
  </script>
  <style scoped lang='scss'>
  .wrap {
    height: 370px;
    overflow: hidden;
  }
  </style>